<template>
  <div>
    <el-card>
      <template #header>
        <div class="df aic jcsb">
          <span>商品分类 </span>
          <el-button type="primary" size="small" @click="addList"
            >添加分类</el-button
          >
        </div>
      </template>
      <el-table :data="tableData">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="分类名称" prop="cateName">
          <template #default="{ row }">
            <span v-if="!row.flag">{{ row.cateName }}</span>
            <el-input v-else v-model="row.cateName"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="state">
          <template #default="{ row }">
            <el-switch
              v-model="row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="checkValue"
              :disabled="!row.flag"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" v-if="!row.flag" @click="handleEdit(row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              v-else
              type="success"
              @click="handleEdit(row)"
              >完成</el-button
            >
            <el-button size="small" type="danger" @click="removeGoodsCate(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt20"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.cateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch
            v-model="form.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" dialogFormVisible @click="addCateList"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  api_goods_addcate,
  api_goods_delcate,
  api_goods_editcate,
  api_goods_catelist,
} from "@/api/goods";

console.log(api_goods_addcate);
export default {
  data() {
    return {
      tableData: [],
      total: 1,
      currentPage: 1,
      pageSize: 3,
      value: true,
      form: {
        cateName: "",
        state: false,
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.goodsCatelist();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.goodsCatelist();
    },
    async goodsCatelist() {
      let res = await api_goods_catelist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      let { data, total } = res.data;
      data.forEach((v) => {
        v.state = v.state === 1 ? true : false;
        // 是否可编辑
        v.flag = false;
      });
      this.tableData = data;
      this.total = total;
    },
    checkValue(e) {},
    // 点击添加分类,弹出框
    addList() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    // 点击弹框中的确定发送请求
    async addCateList() {
      let res = await api_goods_addcate({
        cateName: this.form.cateName,
        state: this.form.state ? 1 : 0,
      });
      let { code } = res.data;
      if (code === 0) {
        this.dialogFormVisible = !this.dialogFormVisible;
        this.goodsCatelist();
      }
    },
    // 点击编辑按钮切换
    async handleEdit(row) {
      row.flag = !row.flag;
      if (!row.flag) {
        // 发请求
        let res = await api_goods_editcate({
          ...row,
          state: row.state ? 1 : 0,
        });
      }
    },
    // 点击删除发请求删除商品分类
    async removeGoodsCate(row) {
      let res = await api_goods_delcate({
        id: row.id,
      });
      let { code } = res.data;
      if (code === 0) {
        // 重新渲染界面
        this.goodsCatelist();
      }
    },
  },

  created() {
    this.goodsCatelist();
  },
};
</script>

<style lang="scss" scoped>
</style>